<template>
  <Card title="预充值项目" :loading="loading">
    <p style="margin-left: 8px;">
      <span>消费总额：</span><br/>
      <CountTo prefix="￥" :decimals="2" :startVal="0" :endVal="totalAmount" class="text-4xl" style="margin-left: 10%;color: #f5872e;"/>
    </p>
    <a-table :columns="columns" :data-source="data" size="small" :pagination="false" :showHeader="false">
      <template #title>使用情况：</template>
      <template #bodyCell="{ column, text }">
        <template v-if="column.dataIndex === 'type'">
          <a v-if="text==1">短信通知：</a>
          <a v-if="text==2">实名认证：</a>
          <a v-if="text==3">电子签约：</a>
          <a v-if="text==4">OCR验证：</a>
        </template>
      </template>
    </a-table>
  </Card>

</template>
<script lang="ts" setup>
import { ref } from "vue";
import { Card } from "ant-design-vue";
import { CountTo } from "/@/components/CountTo/index";
import { queryPreItemsTotal } from "/@/api/sys/index";

const loading = ref(true);
const totalAmount = ref(0.00);
const data = ref([]);
const columns = [
  {
    dataIndex: 'type',
    align: "right",
  },
  {
    dataIndex: 'number',
    align: "right",
    customRender:({text}) =>{
      return !text ? "0 条" : text + " 条";
    },
  },
  {
    dataIndex: 'amount',
    align: "left",
    customRender:({text}) =>{
      return !text ? "0.00 元" : parseFloat(text).toFixed(2) + " 元";
    },
  },
];

/**
 * 查询统计数据
 * @param dayType
 */
function initPreItemsTotal() {
  // loading.value = true;
  queryPreItemsTotal().then((res) => {
    if (res.success) {
      data.value = res.result;
      res.result.forEach((item) => {
        totalAmount.value += parseFloat(item.amount);
      });
    }
  }).finally(() => {
    loading.value = false
  });
}

//初始化数据
initPreItemsTotal();

</script>
